<%- include("./layouts/header.ejs")%>

  <div class="main">

    <%- include("./layouts/navBar.ejs")%>

    <div class="container-fluid">
      <div class="page-title">
        <h1>用户</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="row">
        <div class="col-md-4">
          <form id="myform">
            <h2>添加新用户</h2>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input id="email" class="form-control" name="email" type="email" placeholder="邮箱">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/author/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <label for="nickname">昵称</label>
              <input id="nickname" class="form-control" name="nickname" type="text" placeholder="昵称">
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input id="password" class="form-control" name="password" type="text" placeholder="密码">
            </div>
            <div class="form-group">
              <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <!-- 将button改为input标签,目的是阻止form表单默认提交行为 -->
              <input class="btn btn-primary" type="button" id="btnAdd" value="添加"> 
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a class="btn btn-danger btn-sm" href="javascript:;" id="delMore" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
               <tr>
                <th class="text-center" width="40"><input type="checkbox" id="chkToggle"></th>
                <th class="text-center" width="80">头像</th>
                <th>邮箱</th>
                <th>别名</th>
                <th>昵称</th>
                <th>状态</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              <% list.forEach(item=>{%>
              <tr>
                <td class="text-center"><input type="checkbox" data-id="<%= item.id%>" class="chkDel"></td>
                <td class="text-center"><img class="avatar" src="<%= item.avatar%>"></td>
                <td><%= item.email%></td>
                <td><%= item.slug%></td>
                <td><%= item.nickname%></td>
                <% if (item.status == "activated"){%>
                  <td>激活</td>
                <%}else if(item.status == "unactivated"){%>
                  <td>未激活</td>
                <%}else if(item.status == "forbidden"){%>
                  <td>禁用</td>
                <%}else {%>
                  <td>回收</td>
                <%}%>
                <td class="text-center">
                  <a href="/editUserInfo?id=<%= item.id%>" class="btnEdit btn btn-default btn-xs">编辑</a>
                  <a href="/delUser?id=<%= item.id%>" class="btnDel btn btn-danger btn-xs">删除</a>
                </td>
              </tr>
              <%})%>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <%- include("./layouts/aside.ejs")%>

<%- include("./layouts/footer.ejs")%>

<!-- 使用art-template模板 为右侧用户列表的模板-->
    <script type='text/template' id="userListTmp">
      {{each data as item key}}
        <tr>
          <td class="text-center"><input type="checkbox" data-id="{{item.id}}" class="chkDel"></td>
          <td class="text-center"><img class="avatar" src="{{item.avatar}} "></td>
          <td>{{ item.email}}</td>
          <td>{{ item.slug }}</td>
          <td>{{ item.nickname }}</td>
          {{ if item.status=='activated' }}
            <td>激活</td>
            {{else if item.status=='unactivated'  }}
              <td>未激活</td>
            {{else if item.status=='forbidden'}}
             <td>禁用</td>
            {{else}}
          {{/if}}
          <td class="text-center">
            <a href="/editUserInfo?id={{item.id}}" class="btnEdit btn btn-default btn-xs">编辑</a>
            <a href="/delUser?id={{item.id}}" class="btnDel btn btn-danger btn-xs">删除</a>
          </td>
        </tr>
      {{/each}}
    </script>

<!-- 使用art-template模板 渲染左侧编辑页面 -->
    <script type="text/template" id="userInfoTmp">
      <h2>编辑用户</h2>
        <!-- 隐藏域用来存储信息,不显示在页面上 -->
        <input type="hidden" value="{{id}}" name="id">
          <div class="form-group">
            <label for="email">邮箱</label>
            <input id="email" class="form-control" value="{{email}}" name="email" type="email" placeholder="邮箱">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" value="{{slug}}" name="slug" type="text" placeholder="slug">
                <p class="help-block">https://zce.me/author/<strong>slug</strong></p>
            </div>
              <div class="form-group">
                <label for="nickname">昵称</label>
                <input id="nickname" class="form-control" value="{{nickname}}" name="nickname" type="text" placeholder="昵称">
            </div>
                
            <div class="form-group">
                    <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <!-- 将button改为input标签,目的是阻止form表单默认提交行为 -->
              <input class="btn btn-primary" type="button" id="btnEdit" value="更新"> 
            </div>
    </script>

    <!-- 此处是左侧的页面结构模板 -->
    <script type='text/template' id="userLeftTmp">
        <h2>添加新用户</h2>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input id="email" class="form-control" name="email" type="email" placeholder="邮箱">
        </div>
        <div class="form-group">
          <label for="slug">别名</label>
          <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
          <p class="help-block">https://zce.me/author/<strong>slug</strong></p>
        </div>
        <div class="form-group">
          <label for="nickname">昵称</label>
          <input id="nickname" class="form-control" name="nickname" type="text" placeholder="昵称">
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input id="password" class="form-control" name="password" type="text" placeholder="密码">
        </div>
        <div class="form-group">
          <!-- <button class="btn btn-primary" type="submit">添加</button> -->
          <!-- 将之前的button按钮改成如下input标签,目的是阻止form表单的默认提交行为 -->
          <input type="button" value="添加" id="btnAdd" class="btn btn-primary">
        </div>
    </script>

<script>
  //注册添加用户
  //1. 给添加按钮注册事件,委托的方式
  $("#myform").on("click", "#btnAdd",function(){
    //2.发送异步ajax请求
    $.ajax({
      // 请求的信息
      type:"post",
      url: "/userAdd",
      data: $("#myform").serialize(), // 表单序列化方法,可以获取表单input中name属性的值,并拼接为字符串键值对如:"email=aa@qq.com&slug=aa""
      dataType: "json", // 解析返回数据的格式
      success: function(res){ // 返回数据成功执行的程序
        if(res&& res.code==1){
          //跟进返回的数据利用art-template前端模板渲染页面
          //(1)下载art-template模板模块;(2)引入js文件;(3)制作模板;(4)调用template()方法渲染数据
          var htmlStr = template("userListTmp",res)
          // 渲染页面数据
          $("tbody").html(htmlStr)
          //清空页面中的表单的值
          $('#myform input[name]').val('')

          // 调用函数重新给每一个小按钮注册事件
          clickHandler();
        }
      }
    })
  })

  //删除用户
  //1.注册事件
  // $(".btnDel").on("click", function (e) {
  $("tbody").on("click",".btnDel",function(e){ // 通过实践委托
    // alert("点击了按钮")
    //阻止a标签默认行为
    e.preventDefault();

    //2.发送异步ajax请求
    $.ajax({
      //请求信息
      type: "get",
      url:$(this).attr("href"), 
      dataType: "json",
      success: function(res){
        // 根据返回的结果渲染页面
        if(res&&res.code==1){
          var htmlStr = template("userListTmp",res);
          $("tbody").html(htmlStr);

          // 调用函数重新给每一个小按钮注册事件
          clickHandler();
        }
      }
    })
  })

  //编辑用户
  $("tbody").on("click",".btnEdit",function(e){
    e.preventDefault(); //阻止表单默认提交行为
    //发送异步ajax请求
    $.ajax({
      //请求的信息
      type: "get",
      url: $(this).attr("href"), //获取点击事件的属性href获取地址
      dataType: "json",
      success: function(res){
        // console.log(res)
        if(res && res.code == 0){
          //准备模板,渲染数据
          var htmlStr = template("userInfoTmp",res.data[0]);
          $("#myform").html(htmlStr) // 渲染页面
        }
      }
    })
  })

  //更新用户信息
  $("#myform").on("click","#btnEdit",function(){
    //发送异步ajax请求
    $.ajax({
      //请求信息
      type:"post",
      url:"/updateUserInfo",
      data:$("#myform").serialize(),//表单序列化
      success: function(res){
        // 接收后端响应回来的数据,渲染页面
        var htmlStr = template("userListTmp",res)
        $("tbody").html(htmlStr) // 渲染到页面

        //让左侧重新恢复到原来的添加状态
        var htmlStr1 = template("userLeftTmp",{})
        $("#myform").html(htmlStr1)

        // 调用函数重新给每一个小按钮注册事件
        clickHandler();
      }
    })
  })

  // 全选,全不选
  $("#chkToggle").on("click",function(){
    //获取checkbox中checked属性的boolean值,true为选中,false为未选中
    var flag = $(this).prop("checked"); // checked selected disable 必须用prop()方法获取属性值
    $(".chkDel").prop("checked",flag); // 根据flag值设置全选或全不选
    // 根据flag值,设置批量删除按钮的显示和隐藏
    flag ? $("#delMore").fadeIn() : $("#delMore").fadeOut()
  })

  //给每个小复选框注册事件,当复选框选中数量>=2的时候,批量删除的按钮要显示出来,当小复选框都选中,要让全选框也为选中状态
  clickHandler(); //调用执行
  function clickHandler(){
    $(".chkDel").on("click",function(){
      // $("tbody").on("click",".chkDel",function(){
      //获取所有小复选框数量
      var count = $(".chkDel").size(); // size()方法获取数量
      //获取选中的小复选框数量
      var num = $(".chkDel:checked").size();
      // console.log("选中的:"+num)
      // console.log("总的:"+count)
      
      //根据小复选框的情况设置批量删除按钮的显示或隐藏
      num >= 2 ? $("#delMore").fadeIn() : $("#delMore").fadeOut()

      //根据小复选框的情况设置总复选框的选中或不选中
      num == count ? $("#chkToggle").prop("checked",true) : $("#chkToggle").prop("checked", false)
    })
  }

  //批量删除数据
  //1.给批量删除按钮注册事件
  $("#delMore").on("click",function(e){
    e.preventDefault(); // 阻止a标签默认跳转行为
    //遍历获取选中的小复选框
    var ids = [] ; //定义空数组,把遍历到选中的项的id存在数组中
    $(".chkDel:checked").each(function(key,ele){ // key表示索引,ele表示值
      ids.push($(ele).attr('data-id'))
    })
    // console.log(ids)
    //2.发送异步ajax请求
    $.ajax({
      type:"post",
      url:"/delMoreUsers",
      data:{
        ids:ids
      },
      dataType:"json",
      success: function(res){
        //  console.log(res);
        if(res && res.code==0){
          var htmlStr = template("userListTmp",res)
          $("tbody").html(htmlStr)

          //让批量删除按钮隐藏
          $("#delMore").fadeOut()

          // 调用函数重新给每一个小按钮注册事件
          clickHandler();
        }
      }
    })
  })

</script>
